<template>
    <Teleport to="body">
        <div class="dialog">
            <div class="dialog-body">
                <div class="dialog-body-title">本组排行榜</div>
                <div class="dialog-body-one" v-if="props.list[0]?.user">
                    <img class="dialog-body-one-wheat" src="@/assets/images/wheat-one.png" />
                    <img class="dialog-body-one-head" :src="props.list[0].user.xsZp" />

                    <img class="dialog-body-one-crown" src="@/assets/images/crown-one.png" />
                    <div class="dialog-body-one-name">{{ props.list[0].user.xsName }}</div>
                    <div class="dialog-body-one-info">
                        <img class="dialog-body-one-info-num" src="@/assets/images/ranking-one-num.png" />
                        <div class="dialog-body-one-info-achievements">
                            <img src="@/assets/images/achievements.png" />
                            <div class="dialog-body-one-info-achievements-label">成绩</div>
                            <div class="dialog-body-one-info-achievements-value">{{ props.list[0].user.value }}<span style="font-size: 20px;margin-left: 4px;">{{ props.unit }}</span></div>
                        </div>
                        <div class="dialog-body-one-info-achievements" style="top: 44px;">
                            <img src="@/assets/images/score.png" />
                            <div class="dialog-body-one-info-achievements-label">评分</div>
                            <div class="dialog-body-one-info-achievements-value">{{  props.list[0].user.score}}<span style="font-size: 18px;margin-left: 4px;">分</span></div>
                        </div>
                    </div>
                </div>
                <div class="dialog-body-two" v-if="props.list[1]?.user">
                    <img class="dialog-body-two-wheat" src="@/assets/images/wheat-two.png" />
                    <img class="dialog-body-two-head" :src="props.list[1].user.xsZp" />

                    <img class="dialog-body-two-crown" src="@/assets/images/crown-two.png" />
                    <div class="dialog-body-two-name">{{ props.list[1].user.xsName }}</div>
                    <div class="dialog-body-two-info">
                        <img class="dialog-body-two-info-num" src="@/assets/images/ranking-two-num.png" />
                        <div class="dialog-body-two-info-achievements">
                            <img src="@/assets/images/achievements.png" />
                            <div class="dialog-body-two-info-achievements-label">成绩</div>
                            <div class="dialog-body-two-info-achievements-value">{{ props.list[0].user.value }}<span style="font-size: 20px;margin-left: 4px;">{{ props.unit }}</span></div>
                        </div>
                        <div class="dialog-body-two-info-achievements" style="top: 44px;">
                            <img src="@/assets/images/score.png" />
                            <div class="dialog-body-two-info-achievements-label">评分</div>
                            <div class="dialog-body-two-info-achievements-value">{{  props.list[1].user.score}}<span style="font-size: 18px;margin-left: 4px;">分</span></div>
                        </div>
                    </div>
                </div>
                <div class="dialog-body-three" v-if="props.list[2].user ">
                    <img class="dialog-body-three-wheat" src="@/assets/images/wheat-three.png" />
                    <img class="dialog-body-three-head" :src="props.list[2].user.xsZp" />

                    <img class="dialog-body-three-crown" src="@/assets/images/crown-three.png" />
                    <div class="dialog-body-three-name">{{ props.list[2].user.xsName }}</div>
                    <div class="dialog-body-three-info">
                        <img class="dialog-body-three-info-num" src="@/assets/images/ranking-three-num.png" />
                        <div class="dialog-body-three-info-achievements">
                            <img src="@/assets/images/achievements.png" />
                            <div class="dialog-body-three-info-achievements-label">成绩</div>
                            <div class="dialog-body-three-info-achievements-value">{{ props.list[2].user.value }}<span style="font-size: 20px;margin-left: 4px;">{{ props.unit }}</span></div>
                        </div>
                        <div class="dialog-body-three-info-achievements" style="top: 44px;">
                            <img src="@/assets/images/score.png" />
                            <div class="dialog-body-three-info-achievements-label">评分</div>
                            <div class="dialog-body-three-info-achievements-value">{{ props.list[2].user.score }}<span style="font-size: 18px;margin-left: 4px;">分</span></div>
                        </div>
                    </div>
                </div>
                <div class="dialog-body-list">
                    <!-- <div class="dialog-body-list-item" v-for="(item, index) in 10" :key="index">
                        <div class="dialog-body-list-item-bg"></div>
                        <div class="dialog-body-list-item-num">{{ item+3 }}</div>
                        <img class="dialog-body-list-item-head" src="@/assets/images/profile.jpg" />
                        <div class="dialog-body-list-item-name">小夜曲</div>
                        <img class="dialog-body-list-item-sex" v-if="index == 1" src="@/assets/images/ranking-m.png" />
                        <img class="dialog-body-list-item-sex" v-else src="@/assets/images/ranking-w.png" />
                        <div class="dialog-body-list-item-achievements">121<span style="font-size: 22px;">{{ props.unit }}</span></div>
                         <div class="dialog-body-list-item-score">90<span style="font-size: 20px;">分</span></div>

                    </div> -->
                    <div class="dialog-body-list-item" v-if="props.list[3].user">
                        <div class="dialog-body-list-item-bg"></div>
                        <div class="dialog-body-list-item-num">4 </div>
                        <img class="dialog-body-list-item-head" :src="props.list[3].user.xsZp" />
                        <div class="dialog-body-list-item-name">{{ props.list[3].user. xsName}}</div>
                        <img class="dialog-body-list-item-sex" v-if="props.list[3].user.xsSex == 1" src="@/assets/images/ranking-m.png" />
                        <img class="dialog-body-list-item-sex" v-else src="@/assets/images/ranking-w.png" />
                        <div class="dialog-body-list-item-achievements">{{ props.list[3].user.value }}<span style="font-size: 22px;">{{ props.unit }}</span></div>
                        <div class="dialog-body-list-item-score">{{ props.list[3].user.score }}<span style="font-size: 20px;">分</span></div>

                    </div>
                    <div class="dialog-body-list-item" v-if="props.list[4].user">
                        <div class="dialog-body-list-item-bg"></div>
                        <div class="dialog-body-list-item-num">5 </div>
                        <img class="dialog-body-list-item-head" :src="props.list[4].user.xsZp" />
                        <div class="dialog-body-list-item-name">{{ props.list[4].user. xsName}}</div>
                        <img class="dialog-body-list-item-sex" v-if="props.list[4].user.xsSex == 1" src="@/assets/images/ranking-m.png" />
                        <img class="dialog-body-list-item-sex" v-else src="@/assets/images/ranking-w.png" />
                        <div class="dialog-body-list-item-achievements">{{ props.list[4].user.value }}<span style="font-size: 22px;">{{ props.unit }}</span></div>
                        <div class="dialog-body-list-item-score">{{ props.list[4].user.score }}<span style="font-size: 20px;">分</span></div>

                    </div>
                </div>
                <img class="dialog-body-close" src="@/assets/images/close.png" @click="emits('close')">
            </div>
        </div>
    </Teleport>
</template>
<script setup >
const props = defineProps({
    unit: {
        type: String,
        default: 'cm',
    },
    list: {
        type: Array,
        default: () => []
    }
})

const emits = defineEmits(['close'])
</script>
<style lang="scss" scoped>
.dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999999;
    width: 100%;
    height: 100%;
    background-color: rgba($color: #000000, $alpha: 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    &-body {
        width: 1276px;
        height: 784px;
        background: url("@/assets/images/ranking-group.png") no-repeat;
        background-size: 100% 100%;
        overflow: hidden;
        position: relative;
        &-list {
            position: absolute;
            width: 1276px;
            left: 23px;
            top: 532px;
            height: 230px;
            overflow-y: auto;
            border-radius: 6px;

            &-item {
                width: 1230px;
                height: 108px;
                border-radius: 6px;
                background: #ffffff;
                margin-bottom: 10px;
                position: relative;
                display: flex;
                align-items: center;
                &-score {
                    margin-left: 200px;

                    font-size: 40px;
                    color: #000000;
                }
                &-achievements {
                    margin-left: 150px;
                    width: 160px;
                    font-size: 40px;
                    color: #000000;
                }
                &-bg {
                    position: absolute;
                    left: 0;
                    width: 174px;
                    height: 108px;
                    border-radius: 6px 0px 0px 6px;
                    background: linear-gradient(
                        90deg,
                        #fae46d 0%,
                        rgba(255, 237, 139, 0) 100%
                    );
                }
                &-sex {
                    margin-left: 60px;
                    width: 34px;
                    height: 34px;
                }
                &-num {
                    position: relative;
                    background: url("@/assets/images/score.png") no-repeat;
                    background-size: 100% 100%;
                    width: 71px;
                    height: 71px;
                    color: #1a1a1a;
                    font-size: 34px;
                    font-weight: bold;
                    padding-top: 6px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-left: 50px;
                }
                &-head {
                    width: 78px;
                    height: 78px;
                    border-radius: 50%;
                    margin-left: 90px;
                }
                &-name {
                    margin-left: 60px;
                    width: 150px;
                    font-size: 40px;
                    color: #000000;
                }
            }
        }
        &-three {
            width: 450px;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: absolute;
            top: 150px;
            left: 810px;
            &-info {
                position: absolute;
                top: 290px;
                left: 30px;
                width: 100%;
                height: 80px;
                overflow: hidden;
                display: flex;

                &-num {
                    margin-left: 38px;
                    width: 101px;
                    height: 79px;
                }

                &-achievements {
                    position: absolute;
                    left: 160px;
                    top: 0px;
                    width: 240px;
                    // background: #000000;
                    overflow: hidden;

                    display: flex;
                    align-items: center;
                    img {
                        width: 30px;
                        height: 30px;
                    }
                    &-label {
                        font-size: 30px;
                        color: #fff;
                        margin-left: 8px;
                        line-height: 30px;
                    }
                    &-value {
                        overflow: hidden;
                        width: 110px;
                        font-size: 30px;
                        color: #fff;
                        margin-left: 10px;
                    }
                }
            }
            &-crown {
                position: absolute;
                top: 0;
                width: 68px;
                height: 43px;
                z-index: 2;
            }
            &-wheat {
                position: absolute;
                top: 28px;
                width: 208.97px;
                height: 127.22px;
            }
            &-head {
                position: absolute;
                top: 30px;
                width: 108px;
                height: 108px;
                border-radius: 50%;
                border: 2px solid #7eb8e7;
                padding: 2px;
            }
            &-name {
                position: absolute;
                top: 146px;
                left: 120px;
                display: flex;
                justify-content: center;
                width: 208px;
                height: 46px;
                font-size: 32px;
                font-weight: 500;
                letter-spacing: 0.04em;
                color: #ffffff;
                box-sizing: border-box;
                background: url("@/assets/images/ranking-name-bg.png") no-repeat;
                background-size: 100% 100%;
            }
        }

        &-two {
            width: 450px;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: absolute;
            top: 127px;
            left: 28px;
            &-info {
                position: absolute;
                top: 300px;
                width: 100%;
                height: 80px;
                overflow: hidden;
                display: flex;

                &-num {
                    margin-left: 38px;
                    width: 101px;
                    height: 79px;
                }

                &-achievements {
                    position: absolute;
                    left: 160px;
                    top: 0px;
                    width: 240px;
                    // background: #000000;
                    overflow: hidden;

                    display: flex;
                    align-items: center;
                    img {
                        width: 30px;
                        height: 30px;
                    }
                    &-label {
                        font-size: 30px;
                        color: #fff;
                        margin-left: 8px;
                        line-height: 30px;
                    }
                    &-value {
                        overflow: hidden;
                        width: 110px;
                        font-size: 30px;
                        color: #fff;
                        margin-left: 10px;
                    }
                }
            }
            &-crown {
                position: absolute;
                top: 0;
                width: 66px;
                height: 42px;
                z-index: 2;
            }
            &-wheat {
                position: absolute;
                top: 28px;
                width: 208.97px;
                height: 127.22px;
            }
            &-head {
                position: absolute;
                top: 28px;
                width: 108px;
                height: 108px;
                border-radius: 50%;
                border: 2px solid #7eb8e7;
                padding: 2px;
            }
            &-name {
                position: absolute;
                top: 146px;
                left: 120px;
                display: flex;
                justify-content: center;
                width: 208px;
                height: 46px;
                font-size: 32px;
                font-weight: 500;
                letter-spacing: 0.04em;
                color: #ffffff;
                box-sizing: border-box;
                background: url("@/assets/images/ranking-name-bg.png") no-repeat;
                background-size: 100% 100%;
            }
        }

        &-one {
            width: 410px;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: absolute;
            top: 42px;
            left: 433px;
            &-info {
                position: absolute;
                top: 367px;
                width: 100%;
                height: 80px;
                overflow: hidden;
                display: flex;

                &-num {
                    margin-left: 38px;
                    width: 69px;
                    height: 79px;
                }

                &-achievements {
                    position: absolute;
                    left: 140px;
                    top: 0px;
                    width: 240px;
                    // background: #000000;
                    overflow: hidden;

                    display: flex;
                    align-items: center;
                    img {
                        width: 30px;
                        height: 30px;
                    }
                    &-label {
                        font-size: 30px;
                        color: #fff;
                        margin-left: 8px;
                        line-height: 30px;
                    }
                    &-value {
                        overflow: hidden;
                        width: 110px;
                        font-size: 30px;
                        color: #fff;
                        margin-left: 10px;
                    }
                }
            }
            &-crown {
                position: absolute;
                top: 0;
                width: 93px;
                height: 59px;
                z-index: 2;
            }
            &-wheat {
                position: absolute;
                top: 41px;
                width: 296.69px;
                height: 179.16px;
            }
            &-head {
                position: absolute;
                top: 42px;
                width: 152px;
                height: 152px;
                border-radius: 50%;
                border: 2px solid #7eb8e7;
                padding: 2px;
            }
            &-name {
                position: absolute;
                top: 200px;
                left: 100px;
                display: flex;
                justify-content: center;
                width: 208px;
                height: 46px;
                font-size: 32px;
                font-weight: 500;
                letter-spacing: 0.04em;
                color: #ffffff;
                box-sizing: border-box;
                background: url("@/assets/images/ranking-name-bg.png") no-repeat;
                background-size: 100% 100%;
            }
        }

        &-title {
            position: absolute;
            top: 30px;
            font-family: Alimama ShuHeiTi;
            font-size: 60px;
            font-weight: bold;
            left: 27px;
            letter-spacing: 0.09em;
            color: #ffffff;
        }
        &-close {
            position: absolute;
            top: 40px;
            right: 20px;
            width: 40px;
            height: 40px;
            cursor: pointer;
        }
    }
}
</style>